import React ,{useState,useEffect} from 'react';
import { Text, View,Button,Image,usePageEvent, getStorage, setStorage,hideMenuButton,getLaunchOptionsSync } from '@ray-js/ray';
import styles from './index.module.less'
import FriendBox from '../../components/friend_box';
import space_ball from '../../assets/images/tab/space_ball.png'
import NoFriendBall from '../../assets/images/tab/NoFriendBall.png'

const position=[
  0,
  16,
  32,
  48,
  64
]

export default function friend() {

  const [MeetBallList,setMeetBallList]=useState([]);
  const [Background,setBackground]=useState(false);
  usePageEvent('onReady',()=>{
    const {query: { deviceId }} = getLaunchOptionsSync();
    hideMenuButton({});
    getStorage({
      key:deviceId+'0',
      success(res){
        if(res.data!==null){
        const customList = Object.entries(res.data).map(([key, value]) => ({
          esn: key,
          weight: value ,
        }));
        const filteredList = customList.filter(item =>          //将权重为0，1,2,3,4的球球筛选出来
          [0, 1, 2, 3, 4].includes(Number(item.weight))
        );
        
        setMeetBallList(filteredList);
        }
        else{   
          setBackground(true);
        }
      }
    })
  })

  return (
    <>

    <View className={styles.bg_color}>
      {Background &&
        <View className={styles.NoFriednBg}>
          {/* <Image className={styles.BrokenHeart} src={space_ball}></Image> */}
          <Image className={styles.NoFriendBall} src={NoFriendBall}></Image>
          <Text className={styles.NoFriendText1}>暂时没有偶遇球球</Text>
          <Text className={styles.NoFriendText2}>去智能空间寻找附近的球球</Text>
        </View>

      }
      
      {MeetBallList[0]?.esn !== undefined && 
        [...MeetBallList].reverse().map((item, index) => (
          <FriendBox 
            friendball_img={space_ball} 
            top={position[index]} 
            esn={item.esn} 
          />
        ))
      }

      { 
        MeetBallList.length === 5 &&
        <Text className={styles.hint}>最近5次的相遇记录都在里面啦!</Text>
      }
    </View>

    
    

    </>
  );
}


